<template>
  <div class="order" :class="isShow ? 'empty' : ''">
    <md-tab-bar
      v-if="!product_bame"
      v-model="type"
      :items="items"
      :maxLength="5"
      @change="changeTab"
    ></md-tab-bar>
    <md-scroll-view
      ref="scrollView"
      :scrolling-x="false"
      :auto-reflow="true"
      @endReached="$_onEndReached"
      @refreshing="changeTab"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        roller-color="#FD7400"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <md-result-page v-show="isShow" style="margin-top: 30px"></md-result-page>
      <hry-card
        v-for="(item, index) in data"
        :key="index"
        :info="item"
        @refresh="getInfo(true)"
      ></hry-card>
      <md-scroll-view-more
        slot="more"
        :is-finished="isFinished"
        finished-text="已经到底啦~"
      >
      </md-scroll-view-more>
    </md-scroll-view>
  </div>
</template>

<script>
import {
  ResultPage,
  TabBar,
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh
} from "mand-mobile";
export default {
  name: "order",
  components: {
    [ResultPage.name]: ResultPage,
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [TabBar.name]: TabBar,
    hryCard: () => import("@/components/order/card")
  },
  data() {
    return {
      data: [],
      isShow: false,
      items: [
        { name: null, label: "全部" },
        { name: 1, label: "待付款" },
        { name: 2, label: "待发货" },
        { name: 3, label: "待收货" },
        { name: 4, label: "待评价" }
      ],
      type: null,
      curpage: 1,
      product_bame: null,
      isFinished: false
    };
  },
  methods: {
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.curpage++;
      this.getInfo();
    },
    changeTab() {
      this.$nextTick(() => {
        this.curpage = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(
          this.$api.allOrder,
          {
            pageSize: 10,
            pageNumber: this.curpage,
            type: this.type,
            product_name: this.product_bame
          },
          false
        )
        .then(res => {
          if (refresh) {
            this.data = res.data.data;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data.data);
          }
          if (this.curpage === res.data.total_page) {
            this.isFinished = true;
          }
          if (this.data.length === 0) {
            this.isShow = true;
          }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  mounted() {
    if (this.$route.query.info) {
      this.type = parseInt(this.$route.query.info);
    }
    if (this.$route.query.search) {
      this.product_bame = this.$route.query.search;
      this.$store.dispatch("changeCurrentRouterName", "搜索结果");
    }
    this.$refs.scrollView.triggerRefresh();
  }
};
</script>

<style scoped lang="stylus">
.order{
  height 100%;
  overflow hidden;
}
</style>
